<template>
	<div class="layuimini-container">
		<div class="layuimini-main">
			<table class="layui-table" v-if="dataTable.length!=0">
			  <colgroup>
			    <col width="150">
			    <col width="200">
			    <col>
			  </colgroup>
			  <thead>
			    <tr>
			      <th v-for="res in head">{{res}}</th>
				  {{head}}
			    </tr> 
			  </thead>
			  <tbody>
			    <tr v-for="res in body">
			      <td v-for="value in processing(res)">{{value}}</td>
			    </tr>
			  </tbody>
			</table>
			<el-empty v-else :image-size="200"></el-empty>
		</div>
	</div>
</template>

<script>
	import pageApi from "@/api/system/page.js"
	export default {
		data(){
			return{
				dataTable:[],
				head:[],
				body:[],
				data:[]
			}
		},
		created() {
			this.show()
		},
		methods:{
			show(){
				var data = {
					id:this.$route.query.pageId
				}
				pageApi.getByDate(data).then(res=>{
					res.list.forEach(data=>{
						this.dataTable.push(JSON.parse(data.json))
					})
					this.dataTable.forEach(res=>{
						this.body.push(res)
						Object.keys(res).forEach(key=>{
							if( this.head.indexOf(key) === -1 ){
							    this.head.push(key)
							}
						})
						
					})
					console.log(this.body)
				})
			},
			processing(data){
				var list = []
				console.log(data)
				Object.values(data).forEach(value=>{
					list.push(value)
				})
				return list
			}
		}
	}
</script>

<style>
</style>
